<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<div class="hall">
						<div class="menu" style="height:auto;">
							<div class="menuRow">
								<div class="hallMenu">
									<div role="presentation" class="menuItem all selected"><img class="menuItemIcon" src="/pc-static/img/home_blue.png" alt="">购彩大厅</div>
									<div role="presentation" class="menuItem kuai3"><img class="menuItemIcon" src="/pc-static/img/caizhong/58832d17e5110.png" alt="">快3</div>
									<div role="presentation" class="menuItem ssc"><img class="menuItemIcon" src="/pc-static/img/caizhong/58832d203d8bd.png" alt="">时时彩</div>
									<div role="presentation" class="menuItem pk10"><img class="menuItemIcon" src="/pc-static/img/caizhong/58832cfb18d58.png" alt="">PK10</div>
									<div role="presentation" class="menuItem 115"><img class="menuItemIcon" src="/pc-static/img/caizhong/58832d0eb40b0.png" alt="">11选5</div>
									<div role="presentation" class="menuItem ssl"><img class="menuItemIcon" src="/pc-static/img/caizhong/58832d05dd133.png" alt="">低频彩</div>
									<div role="presentation" class="menuItem pcdd"><img class="menuItemIcon" src="/pc-static/img/caizhong/58832ced965e5.png" alt="">PC蛋蛋</div>
									<div role="presentation" class="menuItem lhc"><img class="menuItemIcon" src="/pc-static/img/caizhong/599aa83b6da0d.png" alt="">六合彩</div>
									<div role="presentation" class="menuItem kl10f"><img class="menuItemIcon" src="/img/caizhong/gdkl10f.png" alt="">快乐十分</div>
								</div>
							</div>
						</div>
						<div class="hallContent">
							<div class="hallContentRow">
									<div class="slick-slider slick-initialized" dir="ltr">
									<div class="slick-arrow slick-prev" role="presentation"><!-- <img src="/pc-static/img/prev-btn.png" alt="arrow_left"> --></div>
									<div class="slick-list">
										<div id="switch" class="slick-track" style="opacity: 1; transform: translate3d(0px, 0px, 0px); width: 9360px;">
											
										</div>
									</div>
									<div class="slick-arrow slick-next" role="presentation"><!-- <img src="/pc-static/img/next-btn.png" alt="arrow_right"> --></div>
									<ul class="slick-dots" style="display: block;">
									</ul>
								</div>
							</div>
						</div>
					</div>
<script>
//购彩轮播图
var timers
var bindGCbanner=function(){
	var sw=0;
	var number=$(".slick-dots");
	number.on("click","li",function(){
		$(this).addClass("slick-active").siblings("li").removeClass("slick-active");
		sw=$(this).index();
		sm=4*sw;
		sv=(sw)*(-1040);
		$("#switch div").removeClass("slick-active").removeClass("slick-current")
		for(i=0;i<4;i++){
			$("#switch div[data-index="+Number(sm+i)+"]").addClass("slick-active")
			if(i==0){
				$("#switch div[data-index="+Number(sm+i)+"]").addClass("slick-current")
			}
		}
		
		$("#switch").css("transform","translate3d("+sv+"px, 0px, 0px)")
		$("#switch").css("transition","transform .5s ease-out")
	})
	
	$(".slick-next").on("click",function(){
		sw++;
		if(sw==$(".slick-dots li").length){
			sw=0;
		}
		$(".slick-dots li").eq(sw).trigger("click");
	})
	$(".slick-prev").on("click",function(){
		sw--;
		if(sw==$(".slick-dots li").length){
			sw=0;
		}
		$(".slick-dots li").eq(sw).trigger("click");
	})
}

$.ajax({
	url: "/pc/commonPage.do",
	type: "post",
	data: {},
	success: function(data) {
		var newData=data.data;
		$(".hallContent").css("background-image","url('/d/cp/"+ newData.download_img+"')")
	},
	error: function(status) {
		 PrentLayerLittle("提示：", "网络繁忙,请检查网络")
		//showNormalNoticeModal("#div-i-noticeGenDan", "提示：", "网络繁忙")
	}
})



function newActiveItem(item,item1) {///cp/src/main/webapp/img/caizhong/cqkl10f.png
	var html = null
	if(item == null && item1 == null){
		return ""
	}
	 if(item1 == null){
		html = 
		"<div data-index='3' class='slick-slide slick-active' tabindex='-1' aria-hidden='true' style='outline: none; width: 260px;'>"+
		"<div>"+
			"<div class='hallGameContainer'>"+
				"<div class='gameItemRow'>"+
					"<div class='gameLogo'><img class='logo' src='/img/caizhong/"+item.img+".png' alt=''><img class='shadow'  alt=''></div>"+
					"<div class='gameInfo'>"+
						"<div class='gameName'>"+item.name+"</div>"+
						"<div class='issueNo  "+item.cname+"period'> </div>"+
						"<div class='timeLeft "+item.cname+"'>"+
						"</div>"+
					"</div>"+
				"</div>"+
				"<div class='gameItemRow' id="+item.cname+">"+
					"<a class='rule'><i class='iconfont icon-ruleEmpty'></i>规则</a>"+
					"<a class='rule'><i class='iconfont icon-ruleEmpty'></i>开奖</a>"+
					"<a class='rule'><i class='iconfont icon-TVMovement'></i>走势</a>"+
				"</div>"+
				"<div class='gameItemRow'>"+
						"<div class='play'>立即购彩</div>"+
				"</div>"+
			"</div>"+
		"</div>"+
	"</div>"
	}else{
		html =
			"<div data-index='3' class='slick-slide slick-active' tabindex='-1' aria-hidden='true' style='outline: none; width: 260px;'>"+
			"<div>"+
				"<div class='hallGameContainer'>"+
					"<div class='gameItemRow'>"+
						"<div class='gameLogo'><img class='logo' src='/img/caizhong/"+item.img+".png' alt=''><img class='shadow'  alt=''></div>"+
						"<div class='gameInfo'>"+
							"<div class='gameName'>"+item.name+"</div>"+
							"<div class='issueNo "+item.cname+"period'> </div>"+
							"<div class='timeLeft "+item.cname+"'>"+
							"</div>"+
						"</div>"+
					"</div>"+
					"<div class='gameItemRow' id="+item.cname+">"+
						"<a class='rule'><i class='iconfont icon-ruleEmpty'></i>规则</a>"+
						"<a class='rule'><i class='iconfont icon-ruleEmpty'></i>开奖</a>"+
						"<a class='rule'><i class='iconfont icon-TVMovement'></i>走势</a>"+
					"</div>"+
					"<div class='gameItemRow'>"+
							"<div class='play'>立即购彩</div>"+
					"</div>"+
				"</div>"+
			"</div>"+
			"<div>"+
				"<div class='hallGameContainer'>"+
					"<div class='gameItemRow'>"+
						"<div class='gameLogo'><img class='logo' src='/img/caizhong/"+item1.img+".png' alt=''><img class='shadow'  alt=''></div>"+
						"<div class='gameInfo' >"+
							"<div class='gameName'>"+item1.name+"</div>"+
							"<div class='issueNo "+item1.cname+"period'></div>"+
							"<div class='timeLeft "+item1.cname+"'>"+
							"</div>"+
						"</div>"+
					"</div>"+
					"<div class='gameItemRow' id="+item1.cname+">"+
						"<a class='rule'><i class='iconfont icon-ruleEmpty'></i>规则</a>"+
						"<a class='rule'><i class='iconfont icon-ruleEmpty'></i>开奖</a>"+
						"<a class='rule'><i class='iconfont icon-TVMovement'></i>走势</a>"+
					"</div>"+
					"<div class='gameItemRow'>"+
							"<div class='play'>立即购彩</div>"+
					"</div>"+
				"</div>"+
			"</div>"+
		"</div>"	
	} 
	return html
}
	 var countDown 
var countdownTimer  = []
var falses = false
function countDowns() {
	 if($(".hallContent").length==0){
		 clearInterval(timers)
		 return;
	 }
	$.ajax({
		url: "/syLotterr.do",
		type: "post",
		data: {},
		success: function(data) {
			for(var i = 0;i<data.data.length;i++){
				if(data.data[i].cname!="bjl"){
					var start = new Date(data.message)
					 var end = new Date(data.data[i].nextStopOrderTimeEpoch)
					
					 var time1 = start.getTime()//当前系统时间
					 var time = end.getTime()//下期时间
					 var countDown  = (time-time1)/1000
					 if(falses){
						 if($("."+data.data[i].cname).find(".caizhong").text() == "正在开奖"){
							 timedTask(countDown,data.data[i].cname,data.data[i].nextperiod)
						 }
					 }else{
						 timedTask(countDown,data.data[i].cname,data.data[i].nextperiod)
					 }
				}
			}
			   if(!falses){
				 falses = true
			 }  
		},
		error: function(status) {
			 PrentLayerLittle("提示：", "网络繁忙,请检查网络")
			//showNormalNoticeModal("#div-i-noticeGenDan", "提示：", "网络繁忙")
		}
	}) 
}

 function timedTask(data,name,period){
	 var timer = setInterval(CountDown, 1000);
	 function CountDown() {
		 if($(".hallContent").length==0){
			 clearInterval(timer)
			 return;
		 }
		data--
       	var h = parseInt(data/ 60 / 60 % 60)
       	var m = parseInt(data/ 60 % 60)
		var s = parseInt(data% 60)
		if(h <= 0 && m <= 0 && s <= 0){
			$("."+name+"period").text(period+"期")
			$("."+name).html("<div style='width:auto;'><span class='caizhong' style='padding:10px;'>正在开奖</span></div>")
			 clearInterval(timer) 
		}else{
			if(h < 10){
				h = "0"+h
			}
			if(m < 10){
				m = "0"+m
			}
			if(s < 10){
				s = "0"+s
			}
			$("."+name).html("<div><span class='hh'>"+h+"</span></div>:"+
					"<div><span class='mm'>"+m+"</span></div>:"+
					"<div><span class='ss'>"+s+"</span></div>")
			$("."+name+"period").text(period+"期")
		}
		 }
 }
 
 /* 程序入口 */
$.ajax({
	url: "/syLotterr.do",
	type: "post",
	data: {},
	success: function(data) {
		$("div").data("newData",data)
		var $noticeList = $("#switch")
		$noticeList.empty();
		$(".hallContent .slick-prev").empty();
		$(".hallContent .slick-next").empty();
		$(".hallContent .slick-prev").append("<img src='/pc-static/img/prev-btn.png' alt='arrow_left'>")
		$(".hallContent .slick-next").append("<img src='/pc-static/img/next-btn.png' alt='arrow_right'>")
		var slickli=""
		var error=[];
		var swithLen=Math.ceil((data.data.length-1)/4)
		for(var i = 0;i < data.data.length;i++){
			if(data.data[i].cname!="bjl" ){
				if(data.data[i].state==0){
					error.push(data.data[i].cname)
				}
				 if(i<swithLen){ 
					slickli+="<li><button>"+i/2+"</button></li>"
				 }
				 if(i<data.data.length-1){
					if(data.data[i+1].cname=="bjl"){
						 var html = newActiveItem(data.data[i],data.data[i+2])
						 $noticeList.append(html) 
					}else{
						 var html = newActiveItem(data.data[i],data.data[++i])
						 $noticeList.append(html)
					}
				 }
			}
		}
		for(i=0;i<error.length;i++){
			var item=error[i]
			$("#"+item).parent().addClass("disable")
			$("#"+item).parent().find(".gameLogo .logo").attr("src","/img/caizhong/gray_"+item+".png")
		}
		
		$(".slick-dots").append(slickli)
		$(".slick-dots li").eq(0).addClass("slick-active")
	 $(".slick-dots li").eq(0).addClass("slick-active") 
		countDowns()
		clearInterval(timers)
		timers=setInterval(countDowns, 5000);
	},
	error: function(status) {
		 PrentLayerLittle("提示：", "网络繁忙,请检查网络")
	}
}) 
	
//切换彩种
var bindLotterSwitch=function(){
	$(".hallMenu div").on("click",function(){
		falses=false;
		var newData=$("div").data(newData)
		$(this).addClass("selected").siblings("div").removeClass("selected");
		var lotterType=$(this).attr("class").split(" ")[1];
		var $noticeList = $("#switch")
		$noticeList.html("")
		var data = null;
		var data1 = null;
		var count=0;
		var error=[];  /* 用来存禁用的数组 */
		var data2;  /* 如果该彩种类型的总数是奇数，用data2存住最后一条数据 */
		for(i=0;i<newData.newData.data.length;i++){
			var item=newData.newData.data[i];
			if(item.cname!="bjl"){
				if(item.state==0){
					error.push(item.cname);
				}
				if(item.classt.split(" ")[2]==lotterType){
					count++
					$("#switch").css("transform","translate3d(0px, 0px, 0px)") 
					 $(".slick-dots").hide();
					$(".slick-next").hide();
					$(".slick-prev").hide();
					if(data==null){
						data = newData.newData.data[i];
						data2=data;
					}else{
						data1 = newData.newData.data[i];
					}
					if( data != null && data1 != null){
						 var html = newActiveItem(data,data1)
						 $noticeList.append(html)
						 data = null
						 data1 = null
					}
				}else if(lotterType=="all"){
					count++
					var dist=(Number($(".slick-dots .slick-active").find("button").text()))*(-1040);
					$("#switch").css("transform","translate3d("+dist+"px, 0px, 0px)") 
					$(".slick-dots")[0].style.display="block";
					$(".slick-next")[0].style.display="block";
					$(".slick-prev")[0].style.display="block";
					if(data == null){
						data = newData.newData.data[i];
						data2=data;
					}else{
						data1 = newData.newData.data[i]
					}
					
					if( data != null && data1 != null){
					 var html = newActiveItem(data,data1)
					 $noticeList.append(html)
					 data = null
					 data1 = null
					}
				}
			}
		}
		if(count%2!=0){
			 var html = newActiveItem(data2,null)
			 $noticeList.append(html)
		}
		for(i=0;i<error.length;i++){
			var item=error[i]
			$("#"+item).parent().addClass("disable")
			$("#"+item).parent().find(".gameLogo .logo").attr("src","/img/caizhong/gray_"+item+".png")
		} 
	})
}
bindLotterSwitch();
	bindGCbanner();
	$(".slick-list").on("click",".gameItemRow .rule",function(){
		var index=$(this).index();
		cname=$(this).parent().attr("id");
		if(index==0){
			loadPage("/pc/rule.do")
		}
		else if(index==2){
			loadPage("/pc/trendChart.do")
		}else{
			if($(this).parent().parent().hasClass("disable")){
				bindLayerLittle("温馨提示","该彩种维护中,暂未开放")
				return;
			}
			if(index==1){
				loadPage("/pc/drawdetail.do")
			} 
		} 
	})
	
	$(".slick-list").on("click",".gameItemRow .play",function(){
		if($(this).parent().parent().hasClass("disable")){
			bindLayerLittle("温馨提示","该彩种维护中,暂未开放")
			return;
		}else{
			goLotterPage($(this).parent().prev().attr("id"))
		}
	})
	
	/* 提示该彩种已禁用的方法 */
	function lotterDisable(){
		bindLayerLittle("温馨提示","该彩种维护中,暂未开放")
	}
	
</script>
